<template>
  <div class="topnav-content">
<!--    <Col span="3">-->
      <DatePicker
        type="daterange"
        v-model="selectTime"
        :options="dateOptions"
        placement="bottom-end"
        separator="->"
        :placeholder="placeholder"
        @on-change="change"
        style="width: 100%">
       </DatePicker>
<!--    </Col>-->
  </div>
</template>
<script>
export default {
  name:"date2select",
  props: {
    selectValue: {type: Array,default: () => []},
    placeholder: {type: String,default: ()=>{this.$t("select_date")}}
  },
  watch:{
    selectValue(val){
      if (!!val && val.length == 2){
        this.selectTime = val;
      }
    }
  },
  // v-model
  model:{
    prop: 'selectValue',
    event: "dataChange"
  },
  data(){
    return{
      selectTime: [],
      dateOptions: {
        shortcuts: [
          {
            text: this.$t('today'),
            value() {
              const end = new Date();
              const start = new Date();
              return [start, end];
            }
          },
          {
            text: this.$t('yesterday'),
            value() {
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              return [start, end];
            }
          },
          {
            text: this.$t('last_three_days'),
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              return [start, end];
            }
          },
          {
            text: this.$t('last_week'),
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              return [start, end];
            }
          },
          {
            text: this.$t('last_month1'),
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              return [start, end];
            }
          },
          {
            text: this.$t('last_three_months'),
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              return [start, end];
            }
          },
          {
            text: this.$t('last_year'),
            value() {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              return [start, end];
            }
          }
        ]
      }
    }
  },
  methods:{
    change(){
      //console.log("Date2Select.change: selectTime=%o",this.selectTime);
      let result=null;
      if (this.selectTime[0]!=""){
        this.selectTime[0].setHours(0);
        this.selectTime[0].setMinutes(0);
        this.selectTime[0].setSeconds(0);
        this.selectTime[0].setMilliseconds(0);

        this.selectTime[1].setHours(23);
        this.selectTime[1].setMinutes(59);
        this.selectTime[1].setSeconds(59);
        this.selectTime[1].setMilliseconds(999);
        result=this.selectTime;
      }
      this.$emit('dataChange', this.selectTime);
    },
    getDateRange(){
      let result=null;
      //console.log(">>>>>>>> Date2Select.getDateRange: selectTime=%o",this.selectTime);
      if (this.selectTime.length>0){
        if (this.selectTime[0]!=""){
          this.selectTime[0].setHours(0);
          this.selectTime[0].setMinutes(0);
          this.selectTime[0].setSeconds(0);
          this.selectTime[0].setMilliseconds(0);

          this.selectTime[1].setHours(23);
          this.selectTime[1].setMinutes(59);
          this.selectTime[1].setSeconds(59);
          this.selectTime[1].setMilliseconds(999);
          result=this.selectTime;
        }
      }

      return result;
    },
    startTime(sdate){
      sdate.setHours(0);
      sdate.setMinutes(0);
      sdate.setSeconds(0);
      sdate.setMilliseconds(0);
      return sdate;
    },
    endTime(edate){
      edate.setHours(23);
      edate.setMinutes(59);
      edate.setSeconds(59);
      edate.setMilliseconds(999);
      return edate;
    },
  }
}
</script>
<style lang="less">
@import "./topnav";

</style>
